let wrap = document.querySelector('.wrap'),
    box = document.querySelector('.box'),
    w = wrap.offsetWidth,
    _w = wrap.clientWidth,
    l = wrap.offsetLeft,
    box_t = box.offsetLeft,
    win_h = window.innerHeight,
    page_h = document.documentElement.scrollHeight || document.body.scrollHeight,
    scrTop = document.documentElement.scrollTop || document.body.scrollTop;

console.log('窗口高：'+win_h);
console.log('滚走了'+scrTop);
console.log('页面高'+page_h);

box.addEventListener('mousedown',(e) => {
    let flag = true;
    // 光标按下时，光标与盒子之间的距离
    let disX = e.offsetX,
        disY = e.offsetY;
    // 当开始移动的时候
    document.addEventListener('mousemove',(e) => {
        if(!flag) return;
        let posX = e.pageX - disX - wrap.offsetLeft,
            posY = e.pageY - disY - wrap.offsetTop,
            maxW = wrap.offsetWidth - box.offsetWidth,
            maxH = wrap.offsetHeight - box.offsetHeight;
        document.title = posX + ',' + posY;
        // 让box跟随鼠标移动
        if(posX < 0) posX = 0;
        if(posY < 0) posY = 0;
        if(posX > maxW) posX = maxW;
        if(posY > maxH) posY = maxH;
        box.style.left = posX + 'px';
        box.style.top = posY + 'px';
        console.log(posX,posY)
    });
    document.addEventListener('mouseup',(e) => {
        flag = false;
    });
})
